<template>
    <div>
    <table class="table">
        <tr>
            <th>
                <label for="all">全选</label>
                <input type="checkbox" v-model="checkAll" @click="handleCheckAllChange">
            </th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in goodsList" :key="item.id">
            <td>
                <input type="checkbox" v-model="checkArr" :value="item">
            </td>
            <td>
                <img height="80" :src="item.pic" alt="">
            </td>
            <td>{{item.id}}</td>
            <td>{{item.brand}}</td>
            <td>{{item.price}}</td>
            <td>
                <button @click="decrement(item)" :disabled="item.count<=1">-</button>&nbsp;
                <b>{{item.count}}</b>&nbsp;
                <button @click="increment(item)">+</button>
            </td>
            <td>
                <button class="del" @click="del(index,item)">删除</button>
            </td>
        </tr>
    </table>
    <!-- {{checkArr}} -->
    <div class="total" style="color:red">
        <h1 style="text-align:right">总价格：{{total}}</h1>
    </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                checkArr: [],
                checkAll:false,
                //total:"0.00"
            }
        },
        computed:{
            total(){
                //未勾选商品
                if(this.checkArr.length==0){
                    return "0";
                }else{
                    return (this.checkArr.reduce((total,item)=>{return (total += item.count * item.price)
                    },0) ).toFixed(2)
                }
            }
        },
        watch:{
            //进行全选和反选
            //观察chackAll的变化，只要checkAll数组长度和goodsList长度相等，就说明全被选中了，就把checkAll的值设为true，不然就是false
            checkArr(newCheckArr){
                //console.log(newCheckArr);
                if(this.goodsList.length==newCheckArr.length){
                    //需要设为true
                    this.checkAll = true
                }else{
                    this.checkAll = false
                }
            },
            //用来接收删除的数据，得到删除的是谁
            target: {
                //监听props target的变化
                handler(checkArr){
                    console.log(checkArr);
                    //删除checkArr对应的数据就可以了,用来删除价格的
                    let id = checkArr.id
                    console.log(checkArr);
                    //过滤掉当前数组中id和传过来的id相等的对象
                    //这个return一定要加，不然会清0所有数据
                    this.checkArr = this.checkArr.filter(item=>{return item.id!==id})
                },
                deep:true
            }
        },
        props:{
            //接收数据
            goodsList:{
                // type:Array,
                default(){
                    return []
                }
            },
            //接收被删除的数据
            target:{
                type:Object
            }
        },
        methods:{
            //删除数据
            del(index,item){
                console.log(item);
                this.$emit("del",index)
            },
            //数量减少
            decrement(item){
                item.count--
            },
            //数量增加
            increment(item){
                item.count++
            },
            //全选按钮的逻辑
            handleCheckAllChange(e){
                //console.log(44);
                console.log(e.target.checked);
                let checked = e.target.checked
                //直接判断newVal，如果是true，表示需要全选了
                //应该让checkArr=goodsList

                //主动点击全选的时候，让列表选中和不选中
                //当我们通过逻辑去设定checkAll的时候，就不要控制刘表是否选中了
                if(checked){
                    this.checkArr = this.goodsList
                }else{
                    this.checkArr = []
                }
            }
        }
    }
</script>

<style>
    .table,.total{
        width:600px;
        list-style: none;
        border-collapse: collapse;
        margin:0 auto;
    }
    .table tr:nth-of-type(1){
        background: rgb(238, 197, 252);
    }
    td,th{
        text-align:center;
        padding:5px;
        border:1px solid;
    }
    img{
        height:30px;
        vertical-align: middle;
    }
    button{
        width:20px;
    }
    .del{
        width:50px;
    }
    .more{
        padding:5px;
        border:1px solid;
        margin-bottom:10px;
    }
</style>